<template>
	<view class="bargain-more" v-if="showList && showList.length>0">
		<view class="bargain-more-hd">更多好货</view>
		<view class="bargain-more-bd">
			<view class="bargain-more-item" v-for="(item,index) in showList" :key="item.id">
				<bargain-list-item :item="item"></bargain-list-item>
			</view>
		</view>
		<form report-submit="true" @submit="setFormId">
			<button form-type="submit" hover-class="none" class="mc-flex-vcenter mc-flex-center padding-bottom30 padding-top30 padding-left48" v-if="showList.length>1">
				<text class="mc-gray mc-f13 padding-right10" @tap="toMore">查看更多</text>
				<image src="../../../static/images/right-arrow.png" class="width24 height24" @tap="toMore"></image>
			</button>
		</form>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import bargainListItem from '@/components/home/bargain-list-item/index.vue'
	export default {
		components: {
			bargainListItem
		},
		props: {
			info: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {}
		},
		computed: {
			...mapGetters('draw',{list:'_bargainList'}),
			showList:function(){
				let list = [];
				for (let i in this.list) {
					if(this.list[i].status!==1){
						list.push(this.list[i])
					}
				}
				list = list.slice(0,3)
				return list
			}
		},
		methods: {
			...mapActions('common', ['tabCurrent2Up']),
			...mapActions('draw', ['bargainListLoad']),
			toMore(current) {
				this.tabCurrent2Up(1);
				uni.switchTab({
					url:'/pages/tabBar/draw/index'
				})
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			},
		},
		mounted() {
			this.bargainListLoad()
		}
	}
</script>

<style lang="scss" scoped>
	.bargain-more {
		position: relative;
		width: 706rpx;
		margin: 30rpx auto;
		z-index: 9;
		background-color: white;
		border-radius: 10rpx;
		overflow: hidden;

		.bargain-more-hd {
			position: relative;
			text-align: center;
			font-weight: bold;
			margin: 30rpx auto 16rpx;

			&:before {
				content: ' ';
				position: absolute;
				top: 50%;
				left: 120rpx;
				right: 440rpx;
				border-bottom: 1px solid #ffd9b4;
			}

			&:after {
				content: ' ';
				position: absolute;
				top: 50%;
				left: 440rpx;
				right: 120rpx;
				border-bottom: 1px solid #ffd9b4;
			}
		}
		
		.bargain-more-item{
			position: relative;
			padding: 24rpx 20rpx;

			&:before {
				content: ' ';
				position: absolute;
				bottom: 0;
				left: 20rpx;
				right: 20rpx;
				border-bottom: 1px solid #e5e5e5;
				opacity: 0.6;
			}
			
			&:last-child:before{
				right: 0;
			}
		}
	}
</style>